<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>健康知识大闯关</title>
  <style>
    :root{
      --bg:#fffaf3;
      --card:#ffffff;
      --accent:#2f855a;
      --muted:#6b7280;
      --shadow: 0 6px 18px rgba(16,24,40,0.08);
      --radius:14px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      background: linear-gradient(180deg,#fffefc 0%, #f7fbf8 100%);
      color:#111827;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:100vh;
    }
    .container{
      width:100%;
      max-width:820px;
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:22px;
    }
    header{
      display:flex;
      align-items:center;
      gap:12px;
    }
    header h1{
      margin:0;
      font-size:20px;
    }
    header p{margin:0;color:var(--muted);font-size:13px}
    .progress{
      margin-top:14px;
      height:10px;
      background:#f1f5f9;
      border-radius:999px;
      overflow:hidden;
    }
    .progress > i{
      display:block;
      height:100%;
      background: linear-gradient(90deg,var(--accent), #68d391);
      width:0%;
      transition:width .35s ease;
    }
    .page{
      margin-top:18px;
      min-height:320px;
    }
    .question{
      padding:14px;
      border-radius:12px;
      background:linear-gradient(180deg,#ffffff,#fbfcfd);
      margin-bottom:12px;
      box-shadow: 0 2px 8px rgba(15,23,42,0.04);
    }
    .q-title{
      font-weight:600;
      margin-bottom:8px;
      display:flex;
      gap:8px;
      align-items:center;
    }
    .choices{display:flex;flex-direction:column;gap:8px}
    .choice{
      display:flex;
      gap:10px;
      align-items:center;
      padding:8px 10px;
      border-radius:8px;
      cursor:pointer;
      user-select:none;
    }
    .choice:hover{background:#f8fafc}
    input[type="radio"]{accent-color:var(--accent)}
    .nav{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-top:18px;
    }
    .btn{
      padding:10px 16px;
      border-radius:10px;
      border:0;
      background:var(--accent);
      color:white;
      cursor:pointer;
      font-weight:600;
      box-shadow: 0 6px 14px rgba(47,133,90,0.12);
    }
    .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
    .btn.secondary{
      background:transparent;color:var(--accent);border:1px solid #e6f3ea;
      box-shadow:none;
    }
    .meta{color:var(--muted);font-size:13px}
    .result{
      text-align:center;
      padding:22px;
    }
    .score{
      font-size:36px;font-weight:700;color:var(--accent);
      margin-top:6px;margin-bottom:6px;
    }
    .message{font-size:16px;color:#0f172a;margin-top:8px}
    footer{margin-top:14px;color:var(--muted);font-size:13px;text-align:center}
    @media (max-width:520px){
      .container{padding:14px}
      .question{padding:12px}
      .btn{padding:9px 12px}
    }
  </style>
</head>
<body>
  <div class="container" role="application" aria-labelledby="title">
    <header>
      <div>
        <h1 id="title">健康知识大闯关</h1>
        <p>每3题一页，答题结束后显示你的得分与等级 —— 测试你是几段健康达人</p>
      </div>
    </header>

    <div class="progress" aria-hidden="true">
      <i id="progressBar" style="width:0%"></i>
    </div>

    <main class="page" id="quiz"></main>

    <div class="nav">
      <button id="prevBtn" class="btn secondary" aria-label="上一页">上一页</button>
      <div class="meta" id="pageMeta">第 <span id="currPage">1</span> / <span id="totalPage">5</span> 页</div>
      <button id="nextBtn" class="btn" aria-label="下一页">下一页</button>
    </div>

    <div id="result" style="display:none" class="result" aria-live="polite"></div>

    <footer>注：本页为纯前端演示，数据不上传服务器，仅用于学习与测试</footer>
  </div>

  <script>
    // 题目数据：题干 + 选项 + 正确选项 + 分值
    const questions = [
      // 第一关（每题10分）
      {q:"为了维持身体健康，建议成年人每天主动行走的步数最好达到多少？", opts:["3000步","6000步","10000步","15000步"], ans:"B", pts:10},
      {q:"下列哪种饮品，在常规饮用下，最不建议作为清晨起床后的第一杯水？", opts:["温白开水","淡蜂蜜水","浓盐水","柠檬水"], ans:"C", pts:10},
      {q:"关于睡眠，以下哪种说法是正确的？", opts:["睡前饮酒有助于提高睡眠质量","周末补觉可以完全弥补一周的睡眠欠债","成年人每晚应保证7-9小时的优质睡眠","打呼噜意味着睡得香"], ans:"C", pts:10},
      {q:"处理小面积的烫伤时，第一步应该做什么？", opts:["立即涂抹牙膏或酱油","挑破水泡","用流动的冷水持续冲洗","赶紧用冰块直接冷敷"], ans:"C", pts:10},
      {q:"“膳食宝塔”中，占比最大、最应该多吃的食物类别是？", opts:["鱼、禽、肉、蛋类","蔬菜和水果","谷薯类（主食）","奶类、大豆和坚果类"], ans:"C", pts:10},

      // 第二关（每题15分）
      {q:"关于用眼健康，以下做法错误的是？", opts:["遵循“20-20-20”法则：每看屏幕20分钟，向20英尺（约6米）外远眺20秒","感觉眼睛干涩时，立即使用网红进口眼药水","阅读时，保证光线充足，姿势端正","佩戴隐形眼镜的时间不宜过长，更不可戴着过夜"], ans:"B", pts:15},
      {q:"下列哪种食物组合，更好地遵循了“食物多样化”的原则？", opts:["白米饭 + 红烧肉","杂粮饭 + 清蒸鱼 + 西兰花","馒头 + 土豆丝","面条 + 排骨汤"], ans:"B", pts:15},
      {q:"关于心理健康，以下哪种态度是可取的？", opts:["真正的强者不会有负面情绪","感到持续的情绪低落和压力时，应自己硬扛","寻求心理咨询是软弱和丢脸的表现","情绪健康与身体健康同等重要，必要时应积极寻求专业帮助"], ans:"D", pts:15},
      {q:"在进行中等强度运动时，一个简单的判断运动强度是否合适的方法是？", opts:["运动到精疲力尽为止","运动时能说话，但不能唱歌","运动时心率越低越好","运动时间越长越好"], ans:"B", pts:15},
      {q:"以下关于抗生素的说法，正确的是？", opts:["感冒发烧了，马上吃抗生素好得快","抗生素可以杀灭病毒","病情好转后，可以自行停用抗生素","抗生素是处方药，必须在医生指导下使用"], ans:"D", pts:15},

      // 第三关（每题20分）
      {q:"“隐形盐”通常藏在以下哪种食物中？", opts:["新鲜水果","清蒸的蔬菜","面包、挂面、饼干等加工食品","白开水"], ans:"C", pts:20},
      {q:"预防骨质疏松，以下哪项措施最关键？", opts:["只补充钙片","年轻时增加骨量储备，同时补充钙和维生素D并进行适量负重运动","等老了再开始补钙","多喝骨头汤"], ans:"B", pts:20},
      {q:"关于体检，以下哪种认识是正确的？", opts:["身体没不舒服就不用体检","一次体检正常，就意味着三五年内都健康","体检项目“越高档、越贵”越好","体检应定期进行，并可根据年龄、家族史等因素选择个性化项目"], ans:"D", pts:20},
      {q:"“食物相克”的说法（如螃蟹与柿子同食会中毒）在科学上？", opts:["有充分科学依据，必须严格遵守","大多没有科学依据，对于健康人群，更应关注食物多样性和清洁卫生","是绝对的真理","只对儿童和老人有影响"], ans:"B", pts:20},
      {q:"遇到有人突然倒地，心跳骤停，在救护车到达前，最关键的救援步骤是？", opts:["大声呼喊并摇晃患者","立即进行心肺复苏（CPR），特别是胸外按压","掐人中","将患者扶起来坐着"], ans:"B", pts:20},
    ];

    const PAGE_SIZE = 3;
    const totalPages = Math.ceil(questions.length / PAGE_SIZE);
    let currentPage = 1;

    const userAnswers = new Array(questions.length).fill(null);

    const quizEl = document.getElementById('quiz');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const currPageEl = document.getElementById('currPage');
    const totalPageEl = document.getElementById('totalPage');
    const progressBar = document.getElementById('progressBar');
    const resultEl = document.getElementById('result');

    totalPageEl.textContent = totalPages;

    function renderPage(page){
      quizEl.innerHTML = '';
      resultEl.style.display = 'none';
      const start = (page - 1) * PAGE_SIZE;
      const end = Math.min(start + PAGE_SIZE, questions.length);
      for(let i = start; i < end; i++){
        const q = questions[i];
        const qDiv = document.createElement('div');
        qDiv.className = 'question';
        const qTitle = document.createElement('div');
        qTitle.className = 'q-title';
        qTitle.innerHTML = `<span style="color:var(--accent);font-weight:700">Q${i+1}.</span> ${q.q}`;
        qDiv.appendChild(qTitle);

        const choices = document.createElement('div');
        choices.className = 'choices';

        const name = 'q' + i;
        q.opts.forEach((opt, idx) => {
          const optionLabel = document.createElement('label');
          optionLabel.className = 'choice';
          optionLabel.setAttribute('for', name + '_' + idx);

          const radio = document.createElement('input');
          radio.type = 'radio';
          radio.name = name;
          radio.id = name + '_' + idx;
          radio.value = String.fromCharCode(65 + idx); // A/B/C/D
          if(userAnswers[i] === radio.value) radio.checked = true;

          radio.addEventListener('change', (e) => {
            userAnswers[i] = e.target.value;
            // enable next if all answered on this page
            updateNavState();
          });

          const optText = document.createElement('span');
          optText.textContent = `${String.fromCharCode(65 + idx)}. ${opt}`;

          optionLabel.appendChild(radio);
          optionLabel.appendChild(optText);
          choices.appendChild(optionLabel);
        });

        qDiv.appendChild(choices);
        quizEl.appendChild(qDiv);
      }

      currPageEl.textContent = page;
      // update progress
      const completedPages = Math.ceil(userAnswers.filter(a=>a!==null).length / PAGE_SIZE);
      const progressPercent = Math.round((page - 1) / (totalPages) * 100);
      progressBar.style.width = Math.round((page - 1) / totalPages * 100) + '%';

      // Prev button state
      prevBtn.disabled = (page === 1);
      // Next button text for last page -> Submit
      nextBtn.textContent = (page === totalPages) ? '提交' : '下一页';

      updateNavState();
      // scroll to top of quiz area (helpful on mobile)
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function updateNavState(){
      // check whether all questions on current page are answered
      const start = (currentPage - 1) * PAGE_SIZE;
      const end = Math.min(start + PAGE_SIZE, questions.length);
      const allAnswered = (() => {
        for(let i=start;i<end;i++){
          if(userAnswers[i] === null) return false;
        }
        return true;
      })();
      nextBtn.disabled = !allAnswered;
    }

    prevBtn.addEventListener('click', () => {
      if(currentPage > 1){
        currentPage--;
        renderPage(currentPage);
      }
    });

    nextBtn.addEventListener('click', () => {
      const start = (currentPage - 1) * PAGE_SIZE;
      const end = Math.min(start + PAGE_SIZE, questions.length);
      // safety: require answers (should already be enforced)
      for(let i=start;i<end;i++){
        if(userAnswers[i] === null){
          alert('请先回答本页所有问题再继续。');
          return;
        }
      }

      if(currentPage < totalPages){
        currentPage++;
        renderPage(currentPage);
      } else {
        // submit
        showResult();
      }
    });

    function showResult(){
      // compute score
      let score = 0;
      let maxScore = 0;
      for(let i=0;i<questions.length;i++){
        maxScore += questions[i].pts;
        if(userAnswers[i] === questions[i].ans){
          score += questions[i].pts;
        }
      }
      const percent = Math.round(score / maxScore * 100);

      // classification using thresholds from your spec (<60, 60-90, >90)
      let title = '';
      let message = '';
      if(percent < 60){
        title = '健康见习生';
        message = '不要灰心，健康知识学无止境，现在开始关注就是最好的起点！';
      } else if(percent <= 90){
        title = '生活观察家';
        message = '你已掌握不少健康知识，但还有一些细节可以完善，再接再厉！';
      } else {
        title = '健康管理大师';
        message = '你绝对是朋友圈里的健康标杆，请将你的知识分享给更多人！';
      }

      // show result area
      resultEl.style.display = 'block';
      resultEl.innerHTML = `
        <div style="max-width:560px;margin:0 auto;padding:12px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#fbfff7);box-shadow:var(--shadow);">
          <h2 style="margin:0;color:var(--accent)">${title}</h2>
          <div class="score">${score} / ${maxScore} 分</div>
          <div style="font-size:14px;color:var(--muted)">${percent}%</div>
          <p class="message">${message}</p>
          <div style="margin-top:12px">
            <button id="retryBtn" class="btn secondary" style="margin-right:8px">重新答题</button>
            <button id="viewDetailBtn" class="btn">查看答题明细</button>
          </div>
        </div>
      `;

      // hide quiz area and nav
      quizEl.innerHTML = '';
      document.querySelector('.nav').style.display = 'none';
      progressBar.style.width = '100%';

      // attach handlers
      document.getElementById('retryBtn').addEventListener('click', () => {
        // reset
        for(let i=0;i<userAnswers.length;i++) userAnswers[i] = null;
        currentPage = 1;
        document.querySelector('.nav').style.display = 'flex';
        renderPage(currentPage);
      });

      document.getElementById('viewDetailBtn').addEventListener('click', () => {
        showDetail(score, maxScore);
      });

      // show a lightweight shareable text in console (optional)
      console.log(`你的得分：${score}/${maxScore} (${percent}%)`);
    }

    function showDetail(score, maxScore){
      // show list of user's answers and which were correct/incorrect (no elaborate explanations)
      let html = '<div style="max-width:720px;margin:0 auto">';
      html += '<h3 style="margin-top:0">答题明细</h3>';
      questions.forEach((q, idx) => {
        const ua = userAnswers[idx] || '未答';
        const correct = q.ans;
        const ok = (ua === correct);
        html += `<div style="padding:10px;border-radius:10px;margin-bottom:8px;background:#fff;">
          <div style="font-weight:600">Q${idx+1}. ${q.q}</div>
          <div style="margin-top:6px;color:var(--muted)">${q.opts.map((o,i)=>`${String.fromCharCode(65+i)}.${o}`).join('  ')}</div>
          <div style="margin-top:6px">你的答案：<strong style="color:${ok? 'var(--accent)':'#dc2626'}">${ua}</strong> &nbsp; 正确答案：<strong style="color:var(--accent)">${correct}</strong></div>
        </div>`;
      });
      html += `<div style="text-align:center;margin-top:10px"><button id="backToResult" class="btn secondary">返回结果页</button></div>`;
      html += '</div>';

      resultEl.innerHTML = html;
      document.getElementById('backToResult').addEventListener('click', () => {
        // re-calc and show original result view
        showResult();
      });
    }

    // init
    renderPage(currentPage);
  </script>
</body>
</html>

